/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Lato:400,300,700);

body {margin:0; padding:0;-webkit-font-kerning: auto;-webkit-font-smoothing: antialiased; background:#EEE;}

a , div, td, form, input, textarea {font-family:'Lato', sans-serif; font-size:10pt;}

.header {background:#FFF;}
.logo {float:left; padding:20px 25px 0 30px; width:220px;}
/*.logo a {display:block; overflow:hidden; width:55px;}*/
.menu {float:left;}
.social {position:absolute; top:24px; right:20px; z-index:99;}
.clear {clear:both;}
.clear:after {clear:both; content:".";}

#ad {list-style-type:none; padding:0; margin:0;}
#ad li {float:left;text-align:center; width:130px; margin:0; padding:0;}
#ad a {color:#333; text-decoration:none; display:block; padding:0; line-height:70px; padding-top:26px; background:url(../images/menu_bg.png) no-repeat 0 -200px; font-size:10pt;}
#ad a:hover {color:#33A6C9;}
#ad .selected {color:#33A6C9;}

#social {list-style-type:none; margin:0; padding:0;}
#social li {display:inline-block; width:49px; height:47px; margin:0 0 0 2px; padding:0; overflow:hidden; position:relative;}
#social img {position:absolute; z-index:1;}

#banner {width:100%; height:350px; overflow:hidden; position:relative;}

.banner_bg {position:absolute; z-index:1;}

.slider_header {font-size:36pt; color:#FFFFFF; position:absolute; z-index:99; font-weight:200;}
.slide_text {font-size:21pt; color:#FFFFFF; position:absolute; z-index:99; font-weight:100;}

.slide img {top:1000px;}



#content {list-style-type:none; padding:0; margin:0; }
#info {position:relative; text-align:center; width:100%;  top:300px;}
.box_info { position:absolute; z-index:2; text-align:center;}
.box_bg {width:100%; height:300px;background:#CCC; opacity:0.8;  position: absolute; z-index:1;}

.item .img {margin:0 auto; border:0; padding:0; outline:none;}
.item img { height:auto;border:0; padding:0; margin:0; outline:none;width: 100%;}

.info_box {position:relative;}
.item {
	/* for child absolute position */
	 overflow:hidden; float:left; width:20%; margin:0; 
	/* display div in line */
}
.col1 { width:20%; }
.col2 { width: 25%; }
.col3 { width: 50%; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.item .caption p
{
	width:80%;
	font-size: 9pt !important;
	margin:0 auto;
	display:inline-block;
}

.item .caption {
	width:100%;
	height:100%;
	background:#000;
	color:#fff;
	font-weight:100;

	/* fix it at the bottom */
	position:absolute;
	left:0;
	z-index:2;
	text-align:center;
	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a.title {
	text-decoration:none;
	color:#0cc7dd;
	font-size:2em;
	padding: 10% 0 0 0;	
	display:block;
	font-weight:400;
	line-height:85%;
}

.item a { outline:none; display:block; width:100%; height:100%;}

.item .link_btn {width:100%; text-align:center; position:absolute; bottom: 20%;}
.item .link_btn a {display:inline-block; border-radius:5px; background:#0cc7dd; color:#000; text-decoration:none; padding:2%; width:130px; font-weight:400; font-size:12pt;}
.item .link_btn a:hover {background:#0cc7dd; color:#000; text-decoration:none;}


.item .caption p {
	
	margin-top:5%;
	
}

.footer {padding:30px 0 0 0; color:#666; text-align:center;}

    .preloader {  
       background:url(../images/89.gif) center center no-repeat #ffffff;  
       display:inline-block;  
    }  

.more_project {background:#f2f2f2; text-align:center; padding:50px 0;}
.more_project a {display:inline-block; padding:15px 0; width:300px; color:#FFF; font-weight:400; font-size:16pt; background:#0cc7dd; text-decoration:none; border-radius:5px;}
.more_project a:hover {color:#FFF; background:#0cc7dd;}

.touch {background:#222; padding:50px 0; color:#CCC; text-align:center;}
.touch_title {font-size:28pt; font-weight:100;}
.touch_desc {padding:20px 0; font-size:12pt; font-weight:100;}
.touch_desc a {color:#FFF; text-decoration:none; font-size:12pt; font-weight:100; font-style:italic;}
.touch_desc a:hover {color:#0cc7dd;}

.chat_icon a {display:inline-block; margin:0 50px; color:#FFF; text-decoration:none; font-size:12pt; font-weight:100; margin-top:20px;  position:relative; top:0;}

.inner_title {text-align:center;background:#f1f1f1;}
.inner_title ul { list-style-type:none; margin:0; padding:0;}
.inner_title ul li {float:left; margin:0;}
.inner_title li a {display:block; font-size:12pt; font-weight:200; color:#888; position:relative; z-index:2; padding:22px 50px; margin:0; text-decoration:none; text-transform:uppercase;}
.inner_title li a:hover {color:#33A6C9; text-decoration:none;}
.inner_title .sub_bg {background:#33A6C9; width:100%; position:absolute; z-index:1; top:-100px; height:100px;}
.inner_title .sub_item { position:relative; overflow:hidden;}

.inner_title .selected {color:#33A6C9 !important;}

#submenu {background:#666; text-align:center;}
#submenu ul{list-style-type:none; padding:0; margin:0;}
#submenu li {display:inline-block;text-align:center; width:130px; margin:0; padding:0;}
#submenu a {color:#CCC; text-decoration:none; display:block; padding:0; line-height:100px; background:url(../images/menu_bg.png) no-repeat 0 -200px; font-size:10pt;}
#submenu a:hover {color:#FFF;}

.history {background:#f5f5f5;}
.history a {display:inline-block; padding:18px 30px;font-size:12pt; font-weight:200; color:#888; text-decoration:none; text-transform:uppercase;}
.history a:hover {color:#33A6C9; text-decoration:none;}

.content_detail {width:900px; margin:0 auto; padding:30px 0 50px 0;}
.work_info {text-align:center; color:#333;}
.work_info h1 {font-weight:bold; font-size:40pt; text-transform:uppercase; margin:0;}
.work_info p {margin: 20px 0 30px 0; font-size:12pt; font-weight:100; text-align:justify;}
.work_tech {text-align:left; background:#333; padding:5px 20px; font-weight:100; font-size:9pt; color:#FFF;}
.work_tech a {font-size:9pt; text-decoration:none; color:#FFF;}
.work_tech a:hover {color:#33A6C9;}

.work_photo img {margin-top: 20px;}

.left_project {position:fixed; top:50%; left:-152px; margin-top:-60px; background:#FFF; border:1px #888 solid;}
.left_project a {display:block; width:190px; height:100px;}
.left_project .proj_thumb {float:left; width:150px; height:100px; overflow:hidden; border-right:0;}
.left_project .proj_thumb img {height:100%; width:auto;}
.left_project .arrow {float:left; width:40px;text-align:center; padding-top:41px; padding-bottom:42px;}

.right_project {position:fixed; top:50%; right:-152px; margin-top:-60px; background:#FFF; border:1px #888 solid;}
.right_project a {display:block; width:190px; height:60px;}
.right_project .proj_thumb {float:left; width:150px; height:100px; overflow:hidden;}
.right_project .proj_thumb img {height:100%; width:auto;}
.right_project .arrow {float:left; width:40px;text-align:center; padding-top:41px; padding-bottom:42px;}

.contact_header h1 {font-weight:200; font-size:40pt; text-transform:uppercase; margin:0; color:#666;}

.contact_title {font-size:18pt; font-weight:200;}
.contact_title a {font-size:18pt; color:#0CC7DD; text-decoration:none;}
.contact_form {margin-top:30px;}
.contact_form input[type="text"] {padding:20px 30px; font-size:12pt; background:#FFF; border:0; width:90%; margin-bottom:10px; border-radius:7px;}
.contact_form input[type="file"] {padding:20px 30px; font-size:12pt; background:#FFF; border:0; width:90%; margin-bottom:10px; border-radius:7px;opacity:0; }.contact_form textarea {padding:20px 30px; font-size:12pt; background:#FFF; border:0; width:90%; margin-bottom:10px; border-radius:7px; resize:vertical;}
.contact_form .submit {text-align:center; padding:10px 50px; color:#FFF; font-weight:400; font-size:16pt; background:#0cc7dd;border-radius:5px; border:0; margin-bottom:50px;}


.ser_item {margin-top:50px;}
.ser_icon {float:left; margin-right:30px; width:120px;}
.ser_detail {float:left; width: 730px;}
.ser_detail_title {font-weight:200; font-size:22pt; margin-bottom:20px; color:#33A6C9;}
.ser_detail_desc { font-size:12pt !important; color:#666666;}
.ser_detail_desc ul {list-style-type:square; padding-left:105px;}
.ser_detail_desc li {margin-bottom:10px; font-size:12pt; margin-left:0; padding-left:0;}

.ser_detail_desc table {background:#FFF; padding:20px; box-shadow:5px 5px 0 #e6e6e6;}